<template>
  <div class="OfficialCertification">
    <navigation image_='0' title="官方认证" :show="true" :scrollTop="false" v-on:getHeight="getHeight($event)" />
    <div class="header" :style="{marginTop:Height+'px'}">
      <img src="https://img.xunyinjiaoyou.com/static/activity/OfficialCertification/img1a.png" alt="">
    </div>
    <div class="body_center">
      <img src="https://img.xunyinjiaoyou.com/static/activity/OfficialCertification/img2a.png" alt="">
    </div>
    <div class="body_center2">
      <img src="https://img.xunyinjiaoyou.com/static/activity/OfficialCertification/img3a.png" alt="">
    </div>
    <div class="body_center3">
      <img src="https://img.xunyinjiaoyou.com/static/activity/OfficialCertification/img4a.png" alt="">
    </div>
    <div class="body_center4">
      <img src="https://img.xunyinjiaoyou.com/static/activity/OfficialCertification/img5a.png" alt="">
    </div>
    <div class="body_center5">
      <img src="https://img.xunyinjiaoyou.com/static/activity/OfficialCertification/img6a.png" alt="">
    </div>
    <div class="body_center6">
      <img src="https://img.xunyinjiaoyou.com/static/activity/OfficialCertification/img7a.png" alt="">
    </div>
  </div>
</template>
<script>
  import {
    Toast
  } from "vant";
  import navigation from '../../components/navigation'
  export default {
    data() {
      return {
        Height: '',
      };
    },
    components: {
      navigation
    },
    created() {

    },
    methods: {
      getHeight(height) {
        this.Height = height;
      },
    },
  };
</script>
<style scoped lang="less">
  @auto: 0 auto;

  .pxToVW (@px, @attr: width) {
    @vw: (unit(round((@px / 8.28) * 100)) / 100);
    @{attr}:~"@{vw}vw";
  }

  .OfficialCertification {
    width: 100vw;
    background: #2403B4;
  }

  .header {
    width: 100vw;
    .pxToVW(900, height);

    img {
      width: 100%;
    }
  }

  .body_center {
    .pxToVW(790);
    .pxToVW(1150, height);
    margin: @auto;
    .pxToVW(-240, margin-top);

    img {
      width: 100%;
    }

  }

  .body_center2 {
    .pxToVW(790);
    .pxToVW(1150, height);
    margin: @auto;
    .pxToVW(70, margin-top);

    img {
      width: 100%;
    }
  }

  .body_center3 {
    .pxToVW(798);
    .pxToVW(1494, height);
    margin: @auto;
    .pxToVW(70, margin-top);

    img {
      width: 100%;
    }
  }

  .body_center4 {
    .pxToVW(796);
    .pxToVW(878, height);
    margin: @auto;
    .pxToVW(-8, margin-top);

    img {
      width: 100%;
    }
  }

  .body_center5 {
    .pxToVW(796);
    .pxToVW(830, height);
    margin: @auto;

    img {
      width: 100%;
    }
  }

  .body_center6 {
    .pxToVW(796);
    .pxToVW(548, height);
    margin: @auto;

    img {
      width: 100%;
    }
  }
</style>